<template>
	<div class="app">
		<h2>message: {{ message }}</h2>
		<button @click="changeMessage">修改message</button>

		<p>username: {{ account.username }}</p>
		<p>password: {{ account.password }}</p>
		<button @click="changeAccount">修改account</button>

		<!-- ref: 在模板中不需要.value, vue内部会自动解包 -->
		<div>counter: {{ counter }}</div>
		<button @click="increame">+1</button>
		<hr />

		<!-- 浅层解包: 使用时不需要.value, 修改是需要.value -->
		<h2>当前计数: {{ info.counter }}</h2>
		<button @click="counter++">+1</button>
		<button @click="info.counter.value++">+1</button>
	</div>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
	setup() {
		// 没有响应式
		let message = 'hello vue'
		function changeMessage() {
			message = 'abc'
		}

		// reactivr定义复杂类型的数据, 如果传入基本数据类型警告
		const account = reactive({
			username: 'why',
			password: '123456',
		})

		// ref: 简单类型数据, 也可以定义复杂类型
		const counter = ref(100)

		function changeAccount() {
			account.username = 'zs'
		}

		function increame() {
			// counter使用ref, 返回的是一个ref对象, 使用时必须使用value
			counter.value++
		}

		// ref是浅层解包
		const info = {
			counter,
		}

		return {
			info,
			message,
			account,
			counter,
			changeMessage,
			changeAccount,
			increame,
		}
	},
}
</script>

<style scoped></style>
